<template>
	<div class="count-effect">
		<div class="card">
			<div class="card__header">
				<div class="card__header-item">
					<span class="label">总销售额</span>
					<span class="value">￥{{ totalPrice }}</span>
				</div>
				<div class="card__header-item">
					<span class="label red">已分账</span>
					<span class="value">￥{{ assignedAccount }}</span>
				</div>
				<div class="card__header-item">
					<span class="label green">未分账</span>
					<span class="value">￥{{ notAssignedAccount }}</span>
				</div>
			</div>

			<div class="card__container">
				<el-progress :percentage="totalPrice" :stroke-width="10" :show-text="false" />
			</div>

			<div class="card__footer">
				<ul class="count-effect__cop">
					<li>
						<span>今日金额</span>
						<div class="fall">
							<!-- <el-icon>
								<top-right v-if="weekly > 0" />
								<bottom-right v-else />
							</el-icon> -->
							<span>{{ currentDayData }}</span>
						</div>
					</li>

					<li>
						<span>昨天金额</span>
						<div class="rise">
							<!-- <el-icon>
								<top-right v-if="dayly > 0" />
								<bottom-right v-else />
							</el-icon> -->
							<span>{{ yesterdayData }}</span>
						</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { BottomRight, TopRight } from "@element-plus/icons-vue";
import { useCool } from "/@/cool";
const { service } = useCool();

let totalPrice = ref(0);
let currentDayData = ref(0);
let yesterdayData = ref(0);
let notAssignedAccount = ref(0);
let assignedAccount = ref(0);

const getTotalSalesVolume = async () => {
	let data = await service.member.info.totalSalesVolume();
	totalPrice.value = data.totalPrice;
	currentDayData.value = data.currentDayData;
	yesterdayData.value = data.yesterdayData;
	notAssignedAccount.value = data.notAssignedAccount;
	assignedAccount.value = data.assignedAccount;
};

onMounted(() => {
	getTotalSalesVolume();
});
</script>

<style lang="scss" scoped>
.count-effect {
	&__cop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;

		li {
			display: flex;
			list-style: none;
			flex: 1;

			.fall,
			.rise {
				display: flex;
				align-items: center;
				margin-left: 10px;
			}

			.fall {
				color: #13ae7c;
			}

			.rise {
				color: #f21e37;
			}
		}
	}

	.card__container {
		padding-top: 15px;
		box-sizing: border-box;
	}
}
.card__header-item {
	margin-right: 15px;
}
.red {
	color: #f00;
}
.green {
	color: #13ae7c;
}
</style>
